<template>
  <div class="Artwork" @scroll="loading">
    <Art-show :Artlist="Artlist"></Art-show>
    <Loading v-if="this.$store.state.isLoading"></Loading>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
import ArtShow from '@/components/ArtShow.vue';
export default {
  name: 'ArtWork',
  components:{
    ArtShow,
    Loading
  },

  data() {
    return {
      Artlist:[],
      page: 1,
    };
  },

  mounted() {
    
  },
  created() {
    this.$store.commit("setLoading", true);
    this.$http({
      methods:"get",
      url:"/lqb/api/works",
      params:{
        type:"1,4",
        page:this.page,
      }
    }).then(({data:{data}})=>{
      // console.log(data);
      this.Artlist=data;
    this.$store.commit("setLoading", false);

    })
  },
  methods: {
     async  loading(e) {
      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
        this.$store.commit("setLoading", true);
        this.page++;
    const {data:{data}}=await this.$http({
          methods: "get",
          url: "/lqb/api/works",
          params: {
            type:"1,4",
            page: this.page,
          },
        })
        this.Artlist=[...this.Artlist,...data];
        this.$store.commit("setLoading", false);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Artwork{
  width: 100vw;
  height: 73vh;
  overflow-y: scroll;
}
</style>